<template>
    <a-layout class="page-layout border-top">
        <a-layout-sider class="menus" width="50" theme="dark">
            <a-menu theme="dark"
                    mode="vertical"
                    :selectedKeys="selectedKeys"
                    @select="onSelect"
            >
                <a-menu-item v-for="menu in menus" :key="menu.key">
                    <a-tooltip placement="right">
                        <template slot="title">
                            <span>{{menu.title}}</span>
                        </template>
                        <router-link v-if="menu.url" :to="menu.url">
                            <a-icon :type="menu.icon"/>
                        </router-link>
                        <a-icon v-else :type="menu.icon"/>
                    </a-tooltip>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout style="background: white;">
            <a-layout-content class="app-content">
                <router-view></router-view>
            </a-layout-content>
            <a-layout-footer class="app-footer border-top">
                <div class="massage-box-left"></div>
                <div class="massage-box-right">
                    <div class="massage-item">
                        <a-tooltip v-if="isNetworking" title="网络正常">
                            <a-icon type="link"/>
                        </a-tooltip>
                        <a-tooltip v-else title="网络异常">
                            <a-icon type="disconnect" style="color: red;"/>
                        </a-tooltip>
                    </div>
                </div>
                <div style="clear:both"></div>
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>

<script>
    import {createRemoteWindow} from '../utils/windowUtil'
    import MenuDivider from "ant-design-vue/es/vc-menu/Divider";
    import ATooltip from "ant-design-vue/es/tooltip/Tooltip";
    import {isOnline} from '../utils/networkUtil'

    export default {
        components: {
            ATooltip,
            MenuDivider
        },
        data() {
            return {
                selectedKeys: ['1'],
                menus: [
                    {
                        title: '新窗口',
                        icon: 'windows',
                        key: '-1'
                    },
                    {
                        title: '笔记',
                        icon: 'book',
                        url: 'edit',
                        key: '1'
                    },
                    {
                        title: '最近',
                        icon: 'clock-circle',
                        url: 'recently',
                        key: '2'
                    },
                    {
                        title: '设置',
                        icon: 'control',
                        url: 'config',
                        key: '3'
                    },
                    {
                        title: '帮助',
                        icon: 'question-circle',
                        url: 'help',
                        key: '4'
                    },
                ],
                isNetworking: true
            };
        },
        methods: {
            onSelect(option) {
                //key大于0的切换页面和图标，小于0的只执行功能，不切换图标
                if (option.selectedKeys[0] > 0)
                    this.selectedKeys = option.selectedKeys
                switch (option.selectedKeys[0]) {
                    case "-1":
                        createRemoteWindow()
                        break
                    default:
                        break
                }
            }
        },
        created() {

        }
    }
</script>

<style>
    body {
        overflow: hidden;
    }

    ::-webkit-scrollbar { /*滚动条整体样式*/
        width: 3px;
        height: 6px;
        background-color: #7A7A7A;
    }

    ::-webkit-scrollbar-thumb { /*滚动条整体样式*/
        border-radius: 3px;
        background-color: #7A7A7A;
    }

    ::-webkit-scrollbar-track { /*滚动条里面轨道*/
        background-color: #fff;
    }
</style>

<style scoped>
    .page-layout {
        height: 100vh;
    }

    .menus {
        padding-top: 30px;
    }

    .menus .anticon {
        font-size: 30px;
        display: inline;
    }

    .menus .ant-menu-item {
        height: 60px;
        line-height: 60px;
        padding: 6px 10px;
    }

    .app-content {
        overflow: auto;
    }

    .app-footer {
        height: 35px;
        padding: 0px 20px;
        text-align: center;
        background: white;
        color: black;

    }

    .massage-item {
        margin: 0px 10px;
        font-size: 20px;
    }

    .massage-box-left {
        float: left;
    }

    .massage-box-right {
        float: right;
    }
</style>